$(function(){
    var status = null;
    // 点击小图标
    $('.icons').on('click',()=>{
        // 显示隐藏的图标选项
        $('.icons-contain').toggle();
    })
    // 点击小图标选项，切换当前图标
    $('.icons-inner>.fa').on('click',function(){
        let classname = $(this).attr('class');
        $('.icons>.fa').attr('class',classname);
        // 隐藏域的value也要改变，而且尽量从第三位开始截取，以免多添加类名有影响
        $('#classname').val(classname.substring(3));
    });

    $('#btn-add').on('click',function(){
        // 验证非空
        if(utils.isEmpty('#name')) {
            $('.modal-body1>.container-fluid').text('分类名称不能为空');
            $('#modelId1').modal();
            return;
        }
        if(utils.isEmpty('#slug')) {
            $('.modal-body1>.container-fluid').text('别名不能为空');
            $('#modelId1').modal();
            return;
        }
        // 收集表单数据
        let data = $('#form').serialize();
        console.log(data);

        $.post('/addNewCategories',data,(res)=>{
            if(res.code == 200){
                $('.modal-body1>.container-fluid').text('添加成功');
                status = 'add'
                $('#modelId1').modal();
                // 以模板引擎格式获取新添加的数据
                let html = template('tp',res.data);
                // 把数据动态添加到tbody里面
                $('tbody').append(html);
            }
        });
    });

    // 暂存用于删除的数据
    let delId = null;
    let delTr = null;
    // 点击删除事件
    $('tbody').on('click','.btn-danger',function(){
        delTr = $(this).parents('tr');
        delId = delTr.attr('data-id');
        status = 'del'
        $('.modal-body>.container-fluid').text('确定要删除吗？删除后不可恢复！');
        $("#modelId").modal();
    });

    // 点击确定
    $('#btn-sure').on('click',function(){
        // if()
        $.get('/deleteCategoryById',{id : delId},function(res){
            if(res.code == 200) {
                delTr.remove();
                $("#modelId").modal('hide');
            }
        });
    });

    // 点击编辑事件
    $('tbody').on('click','.btn-info',function(){
        let id = $(this).parents('tr').attr('data-id');
        // 获取新数据
        $.get('/getCategoryById',{id},(res)=>{
            if(res.code == 200) {
                // 把数据写入表单中
                $('#name').val(res.data.name);
                $('#slug').val(res.data.slug);
                // 修改图标
                $(".icons>.fa").attr('class','fa '+res.data.classname);
                // 把图标隐藏域处理
                $('#classname').val(res.data.classname);
                // 动态的生成一个隐藏域放在表单里面
                // 表单里面需要一个id，但是一开始这里面是没有隐藏域可以供id使用
                let form = $('#form');
                let first = form.children().eq(0);
                // 先判断表单的第一个子元素是不是隐藏域,如果是，说明已经不是第一次编辑了，直接修改隐藏域
                if(first.attr('type') == 'hidden') {
                    first.val(res.data.id);
                } else {
                    // 如果不是，说明第一次编辑，直接生成一个隐藏域
                    let idInput = $('<input type="hidden" name="id" value="'+ res.data.id +'">');
                    form.prepend(idInput);
                }
                // 把添加按钮隐藏，把保存和取消按钮显示
                $('#btn-add').parents().attr('hidden','true');
                $('#btn-save').parents().removeAttr('hidden');
            }
        });
    });

    $('#btn-save').on('click',function(){
        // 非空验证
        if(utils.isEmpty('#name')) {
            $('.modal-body1>.container-fluid').text('名称不能为空');
            $('#modelId1').modal();
            return;
        }
        if(utils.isEmpty('#slug')) {
            $('.modal-body1>.container-fluid').text('别名不能为空');
            $('#modelId1').modal();
            return;
        }
        // 收集表单数据
        // 待补充，更新当前页面数据并初始化左侧编辑部分
        let data = $('#form').serialize();
        $.post('/editCategoryById',data,(res)=>{
            if(res.code == 200) {
                $('.modal-body1>.container-fluid').text('编辑成功');
                $('#modelId1').modal();
            }else {
                $('.modal-body1>.container-fluid').text('编辑失败哦');
                $('#modelId1').modal();
            }
        });
    });

    $('#btn-cancel').on('click',()=>{
     
        // 把表单输入框清空
        $('#name').val('');
        $('#slug').val('');
        // 把图标和隐藏域恢复默认
        $(".icons>.fa").attr('class','fa fa-glass');
        $('#form').children().eq(0).remove();
        // 把添加按钮显示，把保存和取消按钮隐藏
        $('#btn-add').parents().removeAttr('hidden');
        $('#btn-save').parent().attr('hidden','true');
    });


    $('thead input[type=checkbox]').on('click',function(){
        // 得到当前自己选中状态
        let status = $(this).prop('checked');
        // 设置下面的复选框状态和全选框一致
        $('tbody input[type=checkbox]').prop('checked',status);
        // 把批量删除显示    
        status ? delBtn.show() : delBtn.hide();
    });
        let delBtn = $('.page-action > .btn-danger');
        // 点击选择框
        $('tbody').on('click','input[type=checkbox]',function(){
        // 判断是否全部选中
        // 选中的个数和总个数一样就是全选
        // 先获取所有选择框
        let all = $('tbody input[type=checkbox]');
        // 再获取选中的选择框
        let checked = $("tbody input[type=checkbox]:checked");
        // 设置一个变量表示选择框是否全选
        let isCheckAll = all.length === checked.length;
        // 设置全选框的状态和这个变量一致
        $("thead input[type=checkbox]").prop('checked',isCheckAll);
        // 当勾选的个数大于1，把批量删除显示
        checked.length > 1 ? delBtn.show() : delBtn.hide();
    });

    // 批量删除
    $('.page-action > .btn-danger').on('click',function(){
        // 获取勾选的id
        let checked = $("tbody input[type=checkbox]:checked");
        let ids = [];
        checked.each(function(index,ele){
            let id = $(ele).parents('tr').attr('data-id');
            ids.push(id);
        });
        $.get('/deleteMultple',{ids},(res)=>{
            if(res.code == 200) {
                $('.modal-body1>.container-fluid').text('删除成功');
                $('#modelId1').modal(); 
                // 此时应该删除当前页面的已删除tr，待做
            }
        })
    }) 

})